<template>
	<view class="page open">
		<!-- 页面背景 -->
		<view class="linear-background"></view>
		<view class="top-background" :style="'background: url('+url+') no-repeat 0 0 transparent;background-size: 750rpx 1434rpx;'"></view>
		
		
		<!-- 返回按钮 -->
		<back-button zIndex="6"></back-button>
		
		<!-- 主体数据 -->
		<view class="main-wrap">
			<view v-if="showGoods" class="open-box flex-cc" style="background: url(/static/box/bg-open-product.png) no-repeat 0 0 transparent;background-size: 638rpx 940rpx;">
				<view class="goods-box">
					<view :animation="animationFirst" class="row first flex-rcc">
						<template v-for="(image, i) in firstList">
							<view class="goods" :key="i">
								<image :src="image" class="cover"></image>
							</view>
						</template>
					</view>
					<view :animation="animationSecond" class="row second flex-rcc">
						<template v-for="(image, i) in secondList">
							<view class="goods" :key="i">
								<image :src="image" class="cover"></image>
							</view>
						</template>
					</view>
					<view :animation="animationThird" class="row third flex-rcc">
						<template v-for="(image, i) in thirdList">
							<view class="goods" :key="i">
								<image :src="image" class="cover"></image>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view v-else class="img-box">
				<image :animation="animationShake" src="../../static/box/img-box.png" class="image"></image>
			</view>
			
			<view v-if="showBottom" class="bottom-box flex-cc">
				<view @click="openShakeAnimation()" class="btn-start bold">点击开启</view>
				<view class="shark bold flex-rcc">
					<image src="../../static/box/icon-shark.png" class="icon"></image>
					<text>“摇一摇”手机, 获得商品</text>
				</view>
				<view class="tips">
					<view class="text">本页仅为展示效果</view>
					<view class="text">获得商品的概率请见商品详情页</view>
				</view>
			</view>
		</view>
		
		<view v-if="showGoods" :animation="animationMask" class="mask-fixed"></view>
		
		<!-- 提示信息 -->
		<u-toast ref="uToast" />
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: {},
				queryParams: {
					page: 1,
					limit: 15,
				},
				goodsList: [],
				firstList: [],
				secondList: [],
				thirdList: [],
				// 掉落动画
				showGoods: true,
				animationFirst: {},
				animationSecond: {},
				animationThird: {},
				animationMask: {},
				animationShake: null,
				
				// 试玩按钮
				showBottom: false,
				
				url:this.$net.url+'/addons/lingchi_guess_box/public/wxapp/zs.png'
			}
		},
		onLoad(query) {
			this.query = query
			const {blind_box_id, order_main_id, test} = query
			
			
			if(blind_box_id>0) this.getList(blind_box_id)
			if(test>0) this.showBottom = true
		},
		onShow() {
			let _this = this
			uni.onAccelerometerChange(function (res) {
			    
				if(res.x > 0.7 && res.y > 0.7) {
					
					_this.$refs.uToast.show({
						title: '你使用了摇一摇！',
						type: 'success'
					})
					_this.openShakeAnimation()
				}
			});
		},
		methods: {
			// 奖品动画
			startAnimation(line, ty, scale) {
				let animation = uni.createAnimation({
					duration: 2500,
					timingFunction: 'ease',
				})
				this.animation = animation
				animation.translate(0, ty).scale(scale).step()
				switch(line) {
					case 'first':
						this.animationFirst = animation.export()
						break;
					case 'second':
						this.animationSecond = animation.export()
						break;
					case 'third':
						this.animationThird = animation.export()
						break;
				}
				
			},
			// 遮罩动画
			startMask() {
				let animation = uni.createAnimation({
					duration: 2000,
					timingFunction: 'ease',
				})
				this.animation = animation
				animation.opacity(1).step()
				this.animationMask = animation.export()
			},
			// 试玩抖动动画
			openShakeAnimation() {
				this.animationShake = null
				this.animation = null
				let animation = uni.createAnimation({
					duration: 50,
					timingFunction: 'ease',
				})
				this.animation = animation
				animation.translate(-10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, 10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, 10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, 10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, 10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				animation.translate(-10, 10).step()
				animation.translate(0, 0).step()
				animation.translate(10, -10).step()
				animation.translate(0, 0).step()
				this.animationShake = animation.export()
				
				let _this = this
				setTimeout(() => {
					_this.animationShake = null
					setTimeout(() => {
						uni.redirectTo({
						    url: `/pages/box/award?blind_box_id=${_this.query.blind_box_id}&order_main_id=${_this.query.order_main_id}&test=${_this.query.test}`
						});
					}, 1000)
					
				}, 1800)
				setTimeout(() => {
					uni.vibrateLong({
					    success: function () {
					        
					    }
					});
				}, 1600)
			},
			// 获取奖品信息
			getList(blind_box_id) {
				this.$net.req('/create_order/animation', {...this.queryParams, blind_box_id}, false).then(res => {
					if (res.code === 200) {
						this.goodsList = res.data
						this.firstList = this.goodsList.splice(0, 5)
						this.secondList = this.goodsList.splice(0, 5)
						this.thirdList = this.goodsList
					}
					let _this = this
					setTimeout(() => {
						_this.startAnimation('first', 280, 0.5)
						_this.startAnimation('second', 180, 0.5)
						_this.startAnimation('third', 100, 0.5)
						_this.startMask()
					}, 1000)
					setTimeout(() => {
						uni.vibrateLong({
						    success: function () {
						        
						    }
						});
					}, 2800)
					setTimeout(() => {
						_this.showGoods = false
						
						// 非试玩直接开盒
						setTimeout(() => {
							if(_this.query.test==0) _this.openShakeAnimation()
						}, 1000)
						
					}, 3500)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page.open {
		background: linear-gradient(180deg, #D9EDFF 0%, #E9E4FE 52%, #FAECF1 100%);
		
		.linear-background {
			width: 100%;
			height: 100vh;
			background: linear-gradient(180deg, #D9EDFF 0%, #E9E4FE 52%, #FAECF1 100%);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.top-background {
			width: 750rpx;
			height: 1434rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		
		
		.main-wrap {
			position: relative;
			z-index: 1;
			
			.open-box {
				width: 638rpx;
				height: 940rpx;
				
				margin: 148rpx auto 82rpx;
				
				.goods-box {
					margin-left: 32rpx;
					
					.row {
						width: 100%;
						
						.goods {
							background: url(../../static/box/bg-images.png) no-repeat 0 0 transparent;
							padding: 20rpx;
							
							&:nth-child(even) {
								margin-top: 20rpx;
							}
						}
						.cover {
							border-radius: 50%;
						}
						
						&.first {
							margin-top: 60rpx;
							
							.goods {
								width: 112rpx;
								height: 112rpx;
								background-size: 112rpx 112rpx;
								margin-left: -16rpx;
							}
							
							.cover {
								width: 72rpx;
								height: 72rpx;
							}
						}
						&.second {
							margin-top: 68rpx;
							
							.goods {
								width: 100rpx;
								height: 100rpx;
								background-size: 100rpx 100rpx;
								margin-left: -22rpx;
							}
							
							.cover {
								width: 60rpx;
								height: 60rpx;
							}
						}
						&.third {
							margin-top: 68rpx;
							
							.goods {
								width: 80rpx;
								height: 80rpx;
								background-size: 80rpx 80rpx;
								margin-left: -24rpx;
							}
							
							.cover {
								width: 40rpx;
								height: 40rpx;
							}
						}
						
						
						
					}
				}
			}
			.img-box {
				width: 750rpx;
				height: 1170rpx;
				text-align: center;
				padding-top: 675rpx;
				
				.image {
					width: 360rpx;
					height: 360rpx;
				}
			}
			
			.bottom-box {
				width: 750rpx;
				height: 454rpx;
				background: url(../../static/box/bg-open-bottom.png) no-repeat 0 0 transparent;
				background-size: 750rpx 454rpx;
				
				.btn-start {
					width: 216rpx;
					height: 216rpx;
					font-size: 36rpx;
					color: #2F2E3B;
					line-height: 48rpx;
					margin-top: -42rpx;
					background: url(../../static/box/btn-open-start.png) no-repeat 0 0 transparent;
					background-size: 216rpx 216rpx;
					padding: 62rpx 70rpx;
				}
				
				.shark {
					height: 38rpx;
					font-size: 28rpx;
					color: #333333;
					line-height: 38rpx;
					margin-top: 80rpx;
					
					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
				
				.tips {
					font-size: 24rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: center;
					margin-top: 48rpx;
				}
			}
		}
		
		.mask-fixed {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;
			background-color: #FFF;
			opacity: 0;
		}
	}
</style>
